<template>
  <div
    class="ancestors"
    :style="'background-color:' + props.backgroundColor"
    @mousedown="documentClickEvent"
  >
    <svg
      id="svg"
      width="100%"
      height="100%"
      :viewBox="`0 0 ${props.svgCanvas.width} ${props.svgCanvas.height}`"
    >
      <g
        v-for="(item, index) in props.svg_data"
        :key="item.id"
        :id="item.id"
        :style="
          'transition:all 2s;' +
          (item.active.active_translate_rotate?.val?.selectval
            ? 'transform-origin: 50% 50%;transform-box: fill-box;'
            : '')
        "
        :transform="
          'translate(' +
          item.svgPositionX +
          ',' +
          item.svgPositionY +
          ')' +
          'rotate(' +
          item.angle +
          ')' +
          'scale(' +
          item.size +
          ')'
        "
        @click="clickEvent(item, index, $event)"
        @tap="clickEvent(item, index, $event)"
        @contextmenu.stop="contextmenuEvent(item, index, $event)"
      >
        <svg-dynamic
          :component_type="item.type"
          :component_template="
            props.component_infos.filter((f) => f.type == item.type)[0].template
          "
          :component_props="
            props.component_infos.filter((f) => f.type == item.type)[0].props
          "
          :component_attr="item"
        />
      </g>
    </svg>
  </div>
  <iframeCommon
    ref="child"
    :title="dialogSet.title"
    :isfullScreen="dialogSet.isfullScreen"
    :width="dialogSet.width"
    :height="dialogSet.height"
    :src="dialogSet.url"
  ></iframeCommon>
  <component
    ref="commonDialog"
    :is="dialogSet.dialogType"
    :title="dialogSet.title"
    :isfullScreen="dialogSet.isfullScreen"
    :width="dialogSet.width"
    :height="dialogSet.height"
    :paramSet="dialogSet.paramSet"
    :svg_data="svg_data"
  ></component>
  <ul ref="contextMenuRef" class="contextMenu" v-show="display_contextmenu">
    <li v-for="(item, index) in contextmenu_data" :key="index" @click="item.fun()">
      <p :class="item.enable ? '' : 'disabled'">
        {{ item.name }}
        <span class="shortcut">{{ item.hotkey }}</span>
      </p>
    </li>
  </ul>
</template>

<script setup lang="ts">
import SvgDynamic from "./SvgDynamic.vue";
import iframeCommon from "./Dialog/iframe.vue";
import fanParameters from "./Dialog/fanParameters.vue"; //压风弹框
import { ISvgDataLists, ISvgCanvas, IComponentInfo, ISelectSvg } from "../Model";
import "../assets/css/svgAnimation/index.css";
import {
  reactive,
  ref,
  watch,
  shallowRef,
  getCurrentInstance,
  onMounted,
  nextTick,
  defineAsyncComponent,
} from "vue";
import VideoShow from "./openPage/VideoShow.vue";
const { proxy } = getCurrentInstance();
const dialogList = import.meta.glob("../components/Dialog/*.vue"); //动态异步引入所有的dialog组件
const props = defineProps({
  //组件的json格式
  component_infos: {
    type: Array as () => Array<IComponentInfo>,
    required: true,
    default: [],
  },
  //要渲染的数据
  svg_data: {
    type: Array as () => Array<ISvgDataLists>,
    required: true,
    default: [],
  },
  svgCanvas: {
    type: Object as () => ISvgCanvas,
    default: { width: 1520, height: 720 },
  },
  backgroundColor: {
    type: String,
    default: "transparent", //默认透明色
  },
  token: {
    type: String,
    default: "",
  },
});

let scaleX = ref(1);
let scaleY = ref(1);
onMounted(() => {
  const svg = document.getElementsByTagName("svg")[0];
  props.svg_data.forEach((svg) => {
    // const openStyle =
    //   svg.click_event?.left_click?.alarm?.open_style?.val?.selectval;
    //   if((openStyle == "_blank" || openStyle == "_self")&&svg.click_event?.left_click?.alarm?.url){
    //   }
  });
});
let dialogType = shallowRef(null);
let dialogSet = reactive({
  dialogType: null,
  title: "",
  url: "",
  width: "",
  height: "",
  isfullScreen: false,
  paramSet: {},
});

watch(
  () => props.svg_data,
  (newVal) => {}
);

//鼠标左键点击
const clickEvent = (selectsvg: ISvgDataLists, index: number, e: MouseEvent) => {
  e.preventDefault();
  if (selectsvg.click_event?.left_click?.val?.selectval) {
    const openStyle =
      selectsvg.click_event?.left_click?.alarm?.open_style?.val?.selectval;
    if (openStyle == "_blank" || openStyle == "_self") {
      // 将token拼接到URL中
      let url = selectsvg.click_event?.left_click?.alarm?.url;
      if (props.token && url) {
        const separator = url.includes('?') ? '&' : '?';
        url = `${url}${separator}token=${props.token}`;
      }
      window.open(url, openStyle);
      if (openStyle == "_self") {
        window.location.reload();
      }
    } else {
      //弹出窗口
      let k = selectsvg.click_event?.left_click?.alarm;
      //通用弹窗属性
      dialogSet.width = k.width;
      dialogSet.height = k.height;
      dialogSet.isfullScreen = k.isFullscreen;
      dialogSet.title = k.title;
      if (selectsvg.click_event?.left_click?.alarm?.type === "Iframe") {
        //iframe 弹窗
        // dialogSet.dialogType=iframeCommon
        // 将token拼接到URL中
        let url = k.url;
        if (props.token && url) {
          const separator = url.includes('?') ? '&' : '?';
          url = `${url}${separator}token=${props.token}`;
        }
        dialogSet.url = url;
        if (url) (proxy as any)?.$refs?.child.openDialog();
      } else if (selectsvg.click_event?.left_click?.alarm?.type === "Dialog") {
        //常规Dialog 弹窗
        dialogSet.dialogType = defineAsyncComponent(dialogList[k.dialogName]);
        if (k.paramSet) dialogSet.paramSet = JSON.parse(k.paramSet); //常规组件需要传递参数{
        setTimeout(() => {
          (proxy as any)?.$refs?.commonDialog.openDialog();
        }, 200);
      } else if (selectsvg.click_event?.left_click?.alarm?.type === "script") {
        try {
          eval(k.script);
        } catch (err) {
          alert("脚本执行出错" + err);
        }
      }
    }
  }
};

const contextMenuRef = ref<HTMLElement>();
//显示右键菜单
const display_contextmenu = ref(false);

//右键菜单数据
const contextmenu_data = reactive([
  {
    name: "历史曲线",
    hotkey: "",
    url: "",
    enable: true,
    openStyle: "",
    fun: function () {
      if (this.openStyle == "_blank" || this.openStyle == "_self") {
        window.parent.open(this.url, this.openStyle);
        if (this.openStyle == "_self") {
          window.parent.location.reload();
        }
      } else {
        alert("弹出页面开发中");
      }
      display_contextmenu.value = false;
    },
  },
]);
/**
 * @description: 鼠标右键
 * @param {*}
 * @return {*}
 */
const contextmenuEvent = (selectsvg: ISvgDataLists, index: number, e: MouseEvent) => {
  e.preventDefault();
  if (selectsvg.click_event?.right_click?.val?.selectval) {
    display_contextmenu.value = true;
    contextmenu_data[0].name = selectsvg.click_event?.right_click?.alarm?.title;
    contextmenu_data[0].url = selectsvg.click_event?.right_click?.alarm?.url;
    contextmenu_data[0].openStyle =
      selectsvg.click_event?.right_click?.alarm?.open_style.val.selectval;
    (contextMenuRef.value as any).style.left = e.pageX + "px";
    (contextMenuRef.value as any).style.top = e.pageY + "px";
  }
};
//点击别处取消右键弹出菜单
const documentClickEvent = (e: MouseEvent) => {
  if (e.button !== 2) {
    display_contextmenu.value = false;
  }
};
</script>

<style scoped lang="less">
.contextMenu {
  position: absolute;
  z-index: 99999;
  background: #ffffff;
  padding: 5px 0;
  margin: 0px;
  display: block;
  border-radius: 5px;
  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
}

.contextMenu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.contextMenu .shortcut {
  width: 115px;
  text-align: right;
  float: right;
}

.contextMenu p {
  text-decoration: none;
  display: block;
  padding: 0px 15px 1px 20px;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
}

.contextMenu p:hover {
  background-color: #0cf;
  color: #ffffff;
  cursor: default;
}

.contextMenu .disabled {
  color: #999;
}
.contextMenu .disabled:hover {
  color: #999;
  background-color: transparent;
}
.contextMenu li.separator {
  border-top: solid 1px #e3e3e3;
  padding-top: 5px;
  margin-top: 5px;
}

.ancestors {
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.middleShow {
  position: absolute;
  /*display: flex;*/
  width: 600px;
  height: 400px;
  left: calc((100vw - 600px) / 2);
  top: calc((100vh - 400px) / 2);
  z-index: 9999;
  //background-color: black;
}
</style>
